<template>
  <div style="position: relative">
    <div class="content">
      <div class="aside">
        <div class="header">
          <el-input
            size="large"
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="searchContent"
            clearable
          ></el-input>
          <div
            class="result"
            v-show="searchContentShow"
          >
            <div
              class="friend"
              v-for="friend in _searchResult"
              :key="friend.friendId"
              @click="handleFriendClick(friend)"
            >
              <img
                class="avatar"
                :src="defaultGroupAvatar(friend.friendAvatar)"
              />
              <div class="name">
                {{friend.friendUserName}}
                <span v-if="friend.friendRemark">
                  （{{friend.friendRemark}}）
                </span>
              </div>
            </div>
          </div>
        </div>
        <div
          class="list"
          v-loading="loading"
          element-loading-background="rgba(33, 37, 41, 0.5)"
        >
          <el-tabs
            type="card"
            v-model="contactOption"
            stretch
          >
            <el-tab-pane name="msg">
              <span slot="label"><i class="el-icon-chat-dot-square"></i> 消息</span>
              <div class="msg-list">
                <div
                  class="msg"
                  :class="defaultClassGroup(group)"
                  v-for="group in groups"
                  :key="group.groupId"
                  @click="handleMessageClick"
                >
                  <img
                    class="avatar"
                    :src="defaultGroupAvatar(group.groupAvatar)"
                  />
                  <div class="name">{{group.groupName}}</div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane name="friend">
              <span slot="label"><i class="el-icon-user"></i> 好友</span>
              <el-collapse
                v-model="activeName"
                accordion
                @change="handleCollapseOpen"
              >
                <el-collapse-item
                  v-for="(orginization, index) in friends"
                  :key="orginization.organizationId"
                  :title="orginization.organizationName"
                  :name="index"
                >
                  <div class="friend-group">
                    <div
                      class="friend"
                      v-for="friend in getFriendList(orginization.organizationFriendList)"
                      :key="friend.friendId"
                      @click="handleFriendClick(friend)"
                      :class="defaultClassFriend(friend)"
                    >
                      <el-badge
                        is-dot
                        class="dot"
                        :type="getFriendStateType(friend.friendState)"
                      >
                        <img
                          :class="getFriendStateClass(friend.friendState)"
                          class="avatar"
                          :src="defaultGroupAvatar(friend.friendAvatar)"
                        />
                      </el-badge>
                      <div class="name">{{defaultFriendName(friend)}}</div>
                    </div>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-tab-pane>
            <el-tab-pane name="group">
              <span slot="label"><i class="el-icon-money"></i> 群组</span>
              <div class="group-group">
                <div
                  class="group"
                  :class="defaultClassGroup(group)"
                  v-for="group in groups"
                  :key="group.groupId"
                  @click="handleGroupClick(group)"
                >
                  <img
                    class="avatar"
                    :src="defaultGroupAvatar(group.groupAvatar)"
                  />
                  <div class="name">{{group.groupName}}</div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="footer">
          <template v-if="contactOption == 'friend'">
            <div
              class="foot-btn el-icon-plus"
              @click="handleCreateOrganizationClick"
            >创建分组</div>
            <div
              class="foot-btn el-icon-plus"
              @click="handleAddFriendClick"
            >添加好友</div>
          </template>
          <template v-else-if="contactOption == 'group'">
            <div
              class="foot-btn el-icon-plus"
              @click="handleCreateGroupClick"
            >创建群组</div>
            <div
              class="foot-btn el-icon-plus"
              @click="handleAddGroupClick"
            >添加群组</div>
          </template>
          <template v-else>
            <div
              class="foot-btn el-icon-plus"
              @click="handleAddFriendClick"
            >添加好友</div>
            <div
              class="foot-btn el-icon-plus"
              @click="handleAddGroupClick"
            >添加群组</div>
          </template>
        </div>
      </div>
      <div class="detail-info">
        <UserDetail
          v-if="type==='UserDetail'"
          :dataInfo="currentUserData"
          @refresh="refreshList"
        />
        <DefaultDetail v-else-if="type==='MessageDetail'" />
        <OrganizationDetail
          v-else-if="type==='OrganizationDetail'"
          :dataInfo="currentOrganizationData"
          @refresh="refreshList"
        />
        <GroupDetail
          v-else-if="type==='GroupDetail'"
          :dataInfo="currentGroupData"
          @refresh="refreshList"
        />
        <DefaultDetail v-else />
      </div>
    </div>
    <form-dialog
      title="创建分组"
      :visible.sync="createOrganizationVisible"
    >
      <create-organization-form
        ref="createOrganization"
        @cancel="handleCreateOrganizationCancel"
        @submit="handleCreateOrganizationSubmit"
      />
    </form-dialog>
    <form-dialog
      title="查找好友"
      :visible.sync="addFriendVisible"
      width="960px"
    >
      <search-friend-form ref="searchFriend" />
    </form-dialog>
    <form-dialog
      title="创建群"
      :visible.sync="createGroupVisible"
    >
      <create-group-form
        ref="createGroup"
        @cancel="handleCreateGroupCancel"
        @submit="handleCreateGroupSubmit"
      />
    </form-dialog>
    <!-- <form-dialog
      title="查找群"
      :visible.sync="addGroupVisible"
      width="940px"
    >
      <search-group-form />
    </form-dialog> -->
    <div
      class="addIcon"
      @click="addFormAble"
    >
      <i class="el-icon-circle-plus"></i>
    </div>
    <div
      class='popContainer'
      v-show="AddFromVisiable"
      @click="addFormAble"
    >
      <add-form @control="handleControl" />
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import DefaultDetail from './detail/DefaultDetail'
import UserDetail from './detail/UserDetail'
import OrganizationDetail from './detail/OrganizationDetail'
import GroupDetail from './detail/GroupDetail'
import CreateOrganizationForm from './form/CreateOrganizationForm'
import SearchFriendForm from './form/SearchFriendForm'
import CreateGroupForm from './form/CreateGroupForm'
// import SearchGroupForm from './form/SearchGroupForm'
import AddForm from './form/AddFrom'
import {
  mapState,
  mapMutations,
  mapActions,
  mapGetters
} from 'vuex'
export default {
  name: 'Contact',
  components: {
    DefaultDetail,
    UserDetail,
    OrganizationDetail,
    GroupDetail,
    CreateOrganizationForm,
    SearchFriendForm,
    CreateGroupForm,
    // SearchGroupForm,
    AddForm
  },
  data () {
    return {
      currentData: null,
      currentUserData: null,
      currentOrganizationData: null,
      currentGroupData: null,
      contactOption: 'msg',
      activeName: '0',
      searchContent: '',
      type: 'DefaultDetail',
      createOrganizationVisible: false,
      addFriendVisible: false,
      createGroupVisible: false,
      addGroupVisible: false,
      friendLoading: false,
      groupLoading: false,
      AddFromVisiable: false
    }
  },
  computed: {
    ...mapState({
      organizationStore: state => state.organizationList,
      groupStore: state => state.organizationList,
      friendSign: state => state.friendSign
    }),
    ...mapGetters({
      groups: 'groups',
      friends: 'friends',
      friendsUnflod: 'friendsUnflod'
    }),
    loading () {
      return this.friendLoading || this.groupLoading
    },
    searchContentShow () {
      return this.searchContent?.length !== 0
    },
    _friendList () {
      const friendList = []
      this.friends.forEach(organization => {
        this.getFriendList(organization.organizationFriendList).forEach(
          friend => {
            friendList.push(friend)
          }
        )
      })
      return friendList
    },
    _searchResult () {
      return this._friendList.filter(
        friend =>
          (friend.friendUserName &&
            friend.friendUserName.indexOf(this.searchContent) >= 0) ||
          (friend.friendRemark &&
            friend.friendRemark.indexOf(this.searchContent) >= 0) ||
          (friend.friendLoginName &&
            friend.friendLoginName.indexOf(this.searchContent) >= 0)
      )
    }
  },
  watch: {
    friendSign () {
      this.initList()
    }
  },
  mounted () {
    this.initList()
  },
  methods: {
    ...mapMutations(['updateOrganizationList', 'updateGroupList']),
    ...mapActions({
      setGroups: 'contact/setGroups',
      setFriends: 'contact/setFriends'
    }),
    // 加号内操作
    handleControl (option) {
      switch (option) {
        case 'addFriend':
          this.handleAddFriendClick()
          break
        case 'createOrganization':
          this.handleCreateOrganizationClick()
          break
        case 'addGroup':
          this.handleAddGroupClick()
          break
        case 'createGroup':
          this.handleCreateGroupClick()
          break
      }
    },
    getFriendStateClass (friendState) {
      if (friendState) {
        return ''
      } else {
        return 'gray'
      }
    },
    getFriendStateType (friendState) {
      if (friendState) {
        return 'success'
      } else {
        return 'info'
      }
    },
    getFriendList (friendList) {
      if (friendList == null) {
        return []
      } else {
        return friendList
      }
    },
    // 初始化列表
    initList () {
      this.type = 'DefaultDetail'
      this.handleOrganizationAllFriends()
      this.handleGroup()
    },
    // 刷新列表
    refreshList (objectType, other = {}) {
      console.log(objectType, other)
      if (other.init) {
        this.type = 'DefaultDetail'
      }
      switch (objectType) {
        case 'friend': {
          this.handleOrganizationAllFriends({ force: true })
          break
        }
        case 'organization': {
          this.handleOrganizationAllFriends({ force: true })
          break
        }
        case 'group': {
          this.handleGroup({ force: true })
          break
        }
        case 'group-create': {
          this.handleGroup({ force: true }, {
            create: true,
            groupId: other.groupId
          })
          break
        }
        default: {
          this.handleOrganizationAllFriends({ force: true })
          this.handleGroup({ force: true })
          break
        }
      }
    },
    // 获取全部好友
    async handleOrganizationAllFriends (config) {
      await this.setFriends(config)
      switch (this.type) {
        case 'OrganizationDetail': {
          const { organizationId } = this.currentOrganizationData
          this.currentOrganizationData = _.find(this.friends, { organizationId })
          break
        }
        case 'UserDetail': {
          const { friendId } = this.currentUserData
          this.currentUserData = _.find(this.friendsUnflod, { friendId })
          break
        }
      }
    },
    // 获取全部群组
    async handleGroup (config, other = {}) {
      await this.setGroups(config)
      if (other.create) {
        const { groupId } = other
        this.currentGroupData = _.find(this.groups, { groupId })
        this.type = 'GroupDetail'
        return
      }
      switch (this.type) {
        case 'GroupDetail': {
          const { groupId } = this.currentGroupData
          this.currentGroupData = _.find(this.groups, { groupId })
          break
        }
      }
    },
    // 默认群头像
    defaultGroupAvatar (groupAvatar) {
      return groupAvatar || this.$const.DEFAULT_PICTURE
    },
    // 备注
    defaultFriendName (friend) {
      return friend.friendRemark || friend.friendUserName || friend.friendLoginName || '暂无昵称'
    },
    // 默认好友样式
    defaultClassFriend (friend) {
      if (
        friend &&
        this.currentData &&
        friend.friendId === this.currentData.friendId
      ) {
        return 'select'
      } else {
        return ''
      }
    },
    // 默认群组样式
    defaultClassGroup (group) {
      if (
        group &&
        this.currentData &&
        group.groupId === this.currentData.groupId
      ) {
        return 'select'
      } else {
        return ''
      }
    },
    // 点击分组
    handleCollapseOpen (index) {
      if (index !== '') {
        this.type = 'OrganizationDetail'
        this.currentData = this.friends[index]
        this.currentOrganizationData = this.friends[index]
      }
    },
    handleMessageClick () {
      this.type = 'MessageDetail'
    },
    // 点击好友
    handleFriendClick (data) {
      this.type = 'UserDetail'
      this.currentData = data
      this.currentUserData = data
    },
    // 点击一个群组
    handleGroupClick (data) {
      this.type = 'GroupDetail'
      this.currentData = data
      this.currentGroupData = data
    },
    // 创建分组
    // 点击创建分组按钮
    async handleCreateOrganizationClick () {
      this.createOrganizationVisible = true
      await this.$nextTick()
      this.$refs.createOrganization.reset()
    },
    // 取消创建分组
    handleCreateOrganizationCancel () {
      this.createOrganizationVisible = false
    },
    // 提交创建分组
    handleCreateOrganizationSubmit () {
      this.createOrganizationVisible = false
      this.refreshList('organization')
    },
    // 添加好友
    async handleAddFriendClick () {
      this.addFriendVisible = true
      await this.$nextTick()
      this.$refs.searchFriend.reset()
    },
    // 创建群
    // 点击创建群
    async handleCreateGroupClick () {
      this.createGroupVisible = true
      await this.$nextTick()
      this.$refs.createGroup.reset()
    },
    // 取消创建群
    handleCreateGroupCancel () {
      this.createGroupVisible = false
    },
    // 提交创建群
    handleCreateGroupSubmit (groupId) {
      // this.currentGroupData = {
      //   groupId
      // }
      // this.type = 'GroupDetail'
      this.createGroupVisible = false
      this.refreshList('group-create', { groupId })
    },
    // 添加群
    handleAddGroupClick () {
      this.addGroupVisible = true
    },
    // 添加/删除好友/群组
    addFormAble () {
      this.AddFromVisiable = !this.AddFromVisiable
    }
  }
}
</script>

<style lang="scss" scoped>
$main-background-color: #292d32;
$background-color: #24272c;
$border-color: #24272c;
$color: #ffffff;
$border: 1px solid $border-color;
.content {
  width: 100%;
  height: 700px;
  display: flex;
  margin-bottom: 20px;
  .aside {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $main-background-color;
    .header {
      height: 50px;
      line-height: 50px;
      position: relative;
      .result::-webkit-scrollbar {
        display: none;
      }
      .result {
        background-color: #393c43;
        width: 100%;
        height: 600px;
        position: absolute;
        color: #eee;
        z-index: 9999;
        overflow: auto;
        .friend {
          display: flex;
          align-items: center;
          font-size: 14px;
          border-bottom: 1px solid #33363b;
          height: 60px;
          cursor: pointer;
          &:hover {
            background-color: #595b64;
          }
          .avatar {
            width: 40px;
            height: 40px;
            margin: 0 13px;
            flex: none;
          }
          .name {
            color: #fff;
            font-weight: 400;
            font-size: 13px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
      }
      .inline-input {
        width: 100%;
      }
      ::v-deep .el-input__inner {
        border-radius: 0;
        border: 0;
        color: $color;
        background-color: $main-background-color;
      }
    }
    .footer {
      background-color: $background-color;
      color: $color;
      height: 50px;
      display: flex;
      font-size: 14px;
      .foot-btn {
        height: 50px;
        line-height: 50px;
        flex: 1;
        text-align: center;
        cursor: pointer;
        border-right: 1px solid #191919;
        box-sizing: border-box;
        &:last-child {
          border-right: 0;
        }
        &:hover {
          background-color: #3a3f45;
        }
      }
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .list {
      width: 300px;
      overflow-y: scroll;
      flex: 1;
      ::v-deep .el-tabs__header {
        margin-bottom: 0;
        border: 0;
      }
      ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: 0;
      }
      ::v-deep .el-tabs__item {
        border: 0;
        background: $background-color;
        color: #999;
        font-size: 17px;
        font-weight: bold;
        &.is-active {
          color: $color;
        }
        &:hover {
          background-color: #3a3f45;
        }
      }
      ::v-deep .el-collapse {
        border-top: $border;
        border-bottom: $border;
      }
      ::v-deep .el-collapse-item__content {
        padding-bottom: 0;
        background-color: #2e3238;
      }
      ::v-deep .el-collapse-item__header {
        padding-left: 13px;
        color: #dadfe6;
        background-color: $main-background-color;
        border-bottom: $border;
        &:hover {
          background-color: #3a3f45;
        }
      }
      ::v-deep .el-collapse-item__wrap {
        border-bottom: $border;
      }

      .friend-group {
        .friend {
          display: flex;
          align-items: center;
          font-size: 14px;
          border-bottom: $border;
          height: 60px;
          cursor: pointer;
          &:last-child {
            border-bottom: 0;
          }
          &:hover {
            background-color: #3a3f45;
          }
          .dot {
            margin: 0 13px;
            .avatar {
              width: 40px;
              height: 40px;
              flex: none;
            }
          }
          .name {
            color: $color;
            font-weight: 400;
            font-size: 13px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
        .select {
          background-color: $background-color;
          &:hover {
            background-color: $background-color;
          }
        }
      }
      .msg-list {
        .msg {
          display: flex;
          align-items: center;
          font-size: 14px;
          border-bottom: $border;
          height: 60px;
          cursor: pointer;
          &:hover {
            background-color: #3a3f45;
          }
          .avatar {
            width: 40px;
            height: 40px;
            margin: 0 13px;
            flex: none;
          }
          .name {
            color: #fff;
            font-weight: 400;
            font-size: 13px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
        .select {
          background-color: $background-color;
          &:hover {
            background-color: $background-color;
          }
        }
      }
      .group-group {
        .group {
          display: flex;
          align-items: center;
          font-size: 14px;
          border-bottom: $border;
          height: 60px;
          cursor: pointer;
          &:hover {
            background-color: #3a3f45;
          }
          .avatar {
            width: 40px;
            height: 40px;
            margin: 0 13px;
            flex: none;
          }
          .name {
            color: #fff;
            font-weight: 400;
            font-size: 13px;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
        }
        .select {
          background-color: $background-color;
          &:hover {
            background-color: $background-color;
          }
        }
      }
    }
  }
  .detail-info {
    flex: 1;
    background-color: #eee;
  }
}
.addIcon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 60px;
  color: $blue;
  opacity: 0.5;
  &:hover {
    cursor: pointer;
    opacity: 1;
  }
}
.popContainer {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 700px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
</style>
